<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。
	 -->
	<div id="app">
		<h1 @click="handleClick">{{ msg }}</h1>
		<!-- <h3>{{ testAttr }}</h3> -->
	</div>
	
	<!-- 
	 虚拟DOM，通过js生成的dom
	 模板：
	 beforeCreate()
	 const h1 = document.createElement('h1')
	 h1.addEventLinstenr("click", handleClick)
	 h1.textContent = msg
	 ...
	 created()
	 
	 beforeMount() // 挂载
	 $("#app").append(h1)
	 mounted()
	 
	 beforeUpdate()
	 msg = xxx
	 h1.textContent = msg
	 updated()
	 -->
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			// el: "#app",
			data: {
				msg: "Hello Vue 实例！",
				// testAttr: ""
			},
			// 生命周期钩子函数
			created: function() {
				console.log("created")
			},
			beforeCreate() {
				console.log("beforeCreate")
			},
			beforeUpdate() {
				console.log("beforeUpdate")
			},
			updated() {
				console.log("updated")
			},
			beforeMount() {
				console.log("beforeMount")
			},
			mounted() {
				console.log("mounted")
			},
			methods: {
				handleClick() {
					// this.testAttr = 123
				}
			}
		}).$mount("#app")
	</script>
</body>
</html>